import "./index.scss";
import { Ref } from "vue";
import ZZAutoScroll from "@/utils/autoScroll";
import { getDeviceListAll } from "@/api/modules/iot/device";
export default defineComponent({
	emits: [],
	setup() {
		let devStatusRef = ref();
		let scrollRef = ref();
		let tsRef = ref();
		let zzScroll: Ref<ZZAutoScroll | undefined> = ref();
		let deviceList = ref<any>([]);
		onMounted(() => {
			getDeviceList();
			zzScroll.value = new ZZAutoScroll(scrollRef.value, tsRef.value, devStatusRef.value);
			nextTick(() => {
				zzScroll.value?.roll(60);
			});
		});

		const getDeviceList = async () => {
			let { result } = await getDeviceListAll({ pageIndex: 1, pageSize: 9999 });
			deviceList.value = result.records;
		};
		onUnmounted(() => {
			zzScroll.value?.rollStop();
		});
		return () => {
			return (
				<div class="device-status">
					<div
						class="box"
						ref={devStatusRef}
						onMouseover={() => {
							zzScroll.value?.rollStop();
						}}
						onMouseout={() => {
							zzScroll.value?.rollStart(60);
						}}
					>
						<div ref={scrollRef}>
							{deviceList.value.map((item: any) => {
								return (
									<div class={["data-row flex item.scss-center", item.onlineStatus ? "" : "warn-info"]}>
										<div class="icon"></div>
										<div class="data-info flex justify-between">
											<div class="dev-info">
												{item.deptName}#{item.name}
											</div>
											<div class="ext-info">
												{item.onlineStatus ? "当前设备运行正常" : "设备已掉线"}
												{item.alarmStatus && "湿度过高报警"}
											</div>
										</div>
									</div>
								);
							})}

							<div class="data-row flex items-center warn-info">
								<div class="icon"></div>
								<div class="data-info flex justify-between">
									<div class="dev-info">2楼1#机房空调设备</div>
									<div class="ext-info">设备已掉线</div>
								</div>
							</div>
							<div class="data-row flex items-center warn-info">
								<div class="icon"></div>
								<div class="data-info flex justify-between">
									<div class="dev-info">2楼1#视频设备</div>
									<div class="ext-info">设备已掉线</div>
								</div>
							</div>
							<div class="data-row flex items-center warn-info">
								<div class="icon"></div>
								<div class="data-info flex justify-between">
									<div class="dev-info">2楼1#配发发电机</div>
									<div class="ext-info">设备已掉线</div>
								</div>
							</div>
						</div>
						<div ref={tsRef}></div>
					</div>
				</div>
			);
		};
	}
});
